<template>
  <home-card title="任务分析" class="analyze-task">
    <el-select
      slot="operation"
      v-model="currDay"
      placeholder="请选择"
      @change="getListData"
    >
      <el-option
        v-for="item in dayList"
        :key="item"
        :label="`${item}天`"
        :value="item"
      >
      </el-option>
    </el-select>

    <div ref="chart" class="analyze-task-chart"></div>
  </home-card>
</template>

<script>
import HomeCard from "./home-card.vue";
import { getMyTaskLine } from "@/api/home";

export default {
  components: { HomeCard },
  data() {
    return {
      currDay: 10,
      dayList: [10, 20, 30],
      toDoCount: [],
      doneCount: [],
      chartAxisData: [],
    };
  },
  mounted() {
    this.getListData(this.currDay);
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    getListData(day) {
      getMyTaskLine(day).then(({ data }) => {
        this.chartAxisData = data.xdata || [];
        this.toDoCount = data.toDoCount || [];
        this.doneCount = data.doneCount || [];
        this.drawChart();
      });
    },
    resize() {
      if (this.chart) {
        this.chart.resize();
      } else {
        this.drawChart();
      }
    },
    drawChart() {
      this.chart = this.$echarts.init(this.$refs.chart);

      this.chart.setOption(this.getOptions());
    },
    getOptions() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#4080FF",
              type: "dashed",
            },
          },
          textStyle: {
            color: "#1D2129",
          },
          extraCssText:
            "background: linear-gradient(321deg, #FDFEFF 0%, #F4F7FC 100%);border-image: linear-gradient(337deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;",
          padding: 8,
          formatter(paramsArray) {
            const title = `<div style="color: #1D2129;line-height: 20px;">${paramsArray[0].name}</div>`;
            const content = paramsArray.map(
              ({ name, seriesName, value }) => `
                <div 
                  style="height: 32px;margin: 8px 0; padding: 4px 8px;width: 100px;
                    background: rgb(255,255,255,0.8);
                    box-shadow: 6px 0px 20px 0px rgba(34,87,188,0.1);border-radius: 4px;
                    display: flex;justify-content: space-between;align-items: center;
                  "
                >
                  <span style="color: #4E5969;">${seriesName}</span>
                  <span style="font-size: 16px;font-weight: bold;line-height: 24px;">${value}</span>
                </div>`
            );
            return title + content.join("");
          },
        },
        grid: {
          top: "20px",
          left: "40px",
          right: "40px",
          bottom: "40px",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,

              lineStyle: {
                color: "#E5E8EF",
              },
            },
            axisLabel: {
              color: "#86909C",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#E5E8EF",
                width: 1,
              },
            },

            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            boundaryGap: false,
            data: this.chartAxisData,
          },
        ],

        yAxis: [
          {
            type: "value",
            minInterval: 1,
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#E5E8EF",
                type: "dashed",
                width: 1,
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 14,
              color: "#86909C",
              width: 40,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          this.getSeries({
            name: "当日待办",
            lineColor: ["#D7D631", "#ED5400"],
            itemBorderColor: "#64C8FE",
            areaColor: ["rgba(255, 255, 0, 0.3)", "rgba(255, 255, 0, 0)"],
            data: this.toDoCount,
          }),
          this.getSeries({
            name: "当日已办",
            lineColor: ["#1FE8FF", "#7042FB"],
            itemBorderColor: "#4080FF",
            areaColor: ["rgba(17,126,255,0.16)", "rgba(17,128,255,0)"],
            data: this.doneCount,
          }),
        ],
      };
    },
    getSeries({ name, lineColor, itemBorderColor, areaColor, data }) {
      return {
        name,
        type: "line",
        smooth: true, //是否平滑
        showSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 10,
        lineStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: lineColor[0], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: lineColor[1], // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            width: 3,
            shadowColor: "rgba(0, 0, 0, .5)",
            shadowBlur: 1,
            shadowOffsetY: 0,
            shadowOffsetX: 0,
          },
        },
        itemStyle: {
          color: "#fff",
          borderColor: itemBorderColor,
          borderWidth: 3,
        },
        areaStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: areaColor[0], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: areaColor[1], // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        data,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.analyze-task {
  &-chart {
    height: 300px;
  }
  &-tooltip-light {
    color: "red";
  }
}
</style>
